<template>
  <div class="flow-menu" ref="tool">
    <div v-for="menu in menuList" :key="menu.id">
      <draggable
        @end="end"
        @start="move"
        v-model="menu.children"
        :options="draggableOptions"
      >
        <div class="templateItem" :type="menu.type">
          <img :src="menu.imgSrc" />
          <div class="itemName">{{ menu.name }}</div>
        </div>
      </draggable>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import cabinet from './image/cabinet.png'
import host from './image/phy_machine.png'
import virtual from './image/vm.png'
import db from './image/db.png'
import docker from './image/docker.png'
var mousePosition = {
  left: -1,
  top: -1
}

export default {
  props: { type: String },
  data() {
    return {
      activeNames: '1',
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: 'tt',
        // 不使用H5原生的配置
        forceFallback: true
        // fallbackClass: 'flow-node-draggable'
      },
      // 默认打开的左侧菜单的id
      defaultOpeneds: ['1', '2'],
      menuList: [],
      nodeMenu: {}
    }
  },
  components: {
    draggable
  },
  created() {
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function(event) {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX
        mousePosition.top = event.clientY - 50
        event.preventDefault()
        event.stopPropagation()
      }
    }
    if (this.type == 'room') {
      this.menuList = [
        {
          type: 'cabinet',
          name: '机柜',
          imgSrc: cabinet
        },
        {
          type: 'host',
          name: '主机',
          imgSrc: host
        }
      ]
    } else {
      this.menuList = [
        {
          type: 'physical',
          name: '物理机',
          imgSrc: host
        },
        {
          type: 'virtual',
          name: '虚拟机',
          imgSrc: virtual
        },
        {
          type: 'database',
          name: '数据库',
          imgSrc: db
        },
        {
          type: 'docker',
          name: 'docker',
          imgSrc: docker
        }
      ]
    }
  },
  methods: {
    // 根据类型获取左侧菜单对象
    getMenuByType(type) {
      for (let i = 0; i < this.menuList.length; i++) {
        if (this.menuList[i].type === type) {
          return this.menuList[i]
        }
      }
    },
    // 拖拽开始时触发
    move(evt, a, b, c) {
      var type = evt.item.attributes.type.nodeValue
      this.nodeMenu = this.getMenuByType(type)
    },
    // 拖拽结束时触发
    end(evt, e) {
      this.$emit('addNode', evt, this.nodeMenu, mousePosition)
    },
    // 是否是火狐浏览器
    isFirefox() {
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('Firefox') > -1) {
        return true
      }
      return false
    }
  }
}
</script>
<style lang="scss">
.flow-menu{
  display: flex;
  align-items: center;
  height: 60px;
}
.templateItem {
  text-align: center;
  padding-left: 20px;
  display: flex;
  align-items: center;
  img {
    height: 40px;
  }
  .itemName {
    color: #606266;
    font-size: 14px;
    margin-bottom: 5px;
  }
}
</style>
